<template>
  <div class="home-search-view">
    <header>
      <form action="/">
        <van-search v-model="value" show-action shape="round" placeholder="搜标签、合集、文章、讨论、粮单、用户" :left-icon="icon"
          @search="getSearch" @input="getSearch" @cancel="back" />
      </form>
    </header>

    <main>
      <van-tabs v-model="active" line-height="0" :swipeable="false" animated v-show="!value">
        <van-tab v-for="(item, index) in rankList" :title="item.listName" :key="index">
          <keep-alive>
            <search-view :hotLists="item.hotLists" />
          </keep-alive>
        </van-tab>
      </van-tabs>

      <div class="search-results" v-if="dataArr.length > 0">
        <search-results-view :searchResults="searchResults" />

        <h2>热门推荐</h2>
        <masonry-view :dataArr="dataArr" :switchSelected="switchSelected" />
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, KeepAlive } from "vue"
import { Api } from "@/utils/apis"
import icon from "@/assets/images/home/search.png"
import SearchView from "@/components/HomeComponents/SearchComponents/SearchView.vue";
import MasonryView from "@/components/HomeComponents/FoundComponents/MasonryView.vue";
import SearchResultsView from "@/components/HomeComponents/SearchComponents/SearchResultsView.vue";
import type { DataType } from "@/typings"

import router from "@/router";

let active = ref(0)
let value = ref("")
let rankList = ref<any>([])
let searchResults = ref<any>([])

let dataArr = ref<DataType[]>([])

// 获取数据
const getSearchData = async () => {
  let data = await Api.getSearchData()
  rankList.value = data.data.rankList
}

// 搜索api search
const getSearch = async () => { 0
  let data = await Api.getSearch({
    key: value.value
  })
  let data_ = await Api.postSearch({
    key: value.value
  })
  // console.log(data);
  searchResults.value = data.data.items
  dataArr.value = data_.data.posts

}

const switchSelected = (id: number) => {
  dataArr.value.forEach((r: any) => {
    if (r.itemId === id) {
      if (r.postData.postCount.viewCount == 1) {
        r.postData.postCount.viewCount = 0;
        r.postData.postCount.favoriteCount -= 1;
      } else {
        r.postData.postCount.viewCount = 1;
        r.postData.postCount.favoriteCount += 1;
      }
    }
  });
};

const back = () => {
  router.back();
}

onMounted(() => {
  getSearchData()
})

</script>

<style lang="scss" scoped>
.home-search-view {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  z-index: 100;
  background-color: rgb(255, 255, 255);

  header {
    height: 44px;
    margin-bottom: 10px;
  }

  nav {
    img {
      width: 100%;
      height: 100%;
    }
  }

  ::v-deep(.van-swipe) {
    width: 95vw;
    min-height: 0px;
    margin: 0 auto;
    border-radius: 10px;
  }

  main {
    position: relative;

    ::v-deep(.van-tab) {
      span {
        font-size: 14px;
      }
    }

    ::v-deep(.van-tab--active) {
      span {
        font-size: 16px;
      }
    }

    .search-results {
      width: 100vw;
      height: 100vh;
      background-color: #fff;
      position: absolute;
      top: -10px;
      left: 0;
      z-index: 999;

      h2{
        margin: 0;
        margin-left: 20px;
      }
    }
  }
}
</style>